<script setup lang="ts">
import appStore from "@/store";
import {storeToRefs} from "pinia";
import AvatarClipMod from "@/components/common/AvatarClipMod.vue";
import {useRoute, useRouter} from 'vue-router';
import {ref} from 'vue';
import {getMessageUnreadStatus} from "@/http/m_api/message";
import {uploadAvatar} from "@/http/m_api/user";
import {avatar_path_pre} from "@/assets/ts/constant";
import {ElMessage} from "element-plus";

const {reloadUserInfo} = appStore.useUserInfoStore;
const userStore = storeToRefs(appStore.useUserInfoStore)

reloadUserInfo()

const route = useRoute()
const router = useRouter()

const dialogVisibleCropper = ref(false)

const menuList = [
  {
    index: "Information",
    title: "个人信息",
    path: "/person/information",
    icon: 'Avatar'
  }, {
    index: "MResume",
    title: "我的简历",
    path: "/person/mResume",
    icon: 'Memo'
  }, {
    index: "Message",
    title: "我的消息",
    path: "/person/message",
    icon: 'ChatDotRound'
  }, {
    index: "Setting",
    title: "账号设置",
    path: "/person/setting",
    icon: 'Tools'
  }
]

// 监听路由变化
watch(
    () => route.path, // 监听路由路径的变化
    () => {
      getMessageInfo()
    }
);


const change = (path: string) => {
  router.push(path);
}

const unreadNum = ref(0)

const getMessageInfo = async () => {
  const data = await getMessageUnreadStatus();
  if (data.code === 0) {
    unreadNum.value = data.data.unreadCount;
  }
}

getMessageInfo()
const {getAndUpdateUserInfo, updateUserInfo} = appStore.useUserInfoStore

const confirm = async (data: Blob, file: File, url: string) => {
  dialogVisibleCropper.value = false
  const formData = new FormData()
  formData.append('file', data)
  await uploadAvatar(formData).then((data: any)=>{
    updateUserInfo('avatar_url', `${avatar_path_pre}${data.data.avatarUrl}`)
    ElMessage.success("上传成功")
  }).catch(()=>{})
}
</script>

<template>
  <avatar-clip-mod
      v-model:dialogVisibleCropper="dialogVisibleCropper"
      @confirm="confirm"
      @update:dialogVisibleCropper="(args: boolean) => dialogVisibleCropper=args">
  </avatar-clip-mod>
  <div class="page-container">
    <el-card shadow="hover" class="person-card">
      <div class="common-layout">
        <el-container>
          <!-- Header with background image and overlay -->

          <el-container class="main-container">
            <!-- Sidebar -->
            <el-aside width="350px" class="custom-aside">
              <el-card class="side-card">
                <!-- Avatar Section -->
                <div class="avatar-section">
                  <div class="avatar-container">
                    <div class="avatar-ring" @click="dialogVisibleCropper=true">
                      <img
                          :src="userStore.userInfo.value?.avatar_url"
                          alt="avatar"
                          class="avatar"

                      >
                      <div class="avatar-overlay">
                        <i class="fas fa-camera"></i>
                      </div>
                    </div>
                  </div>
                  <div class="user-info">
                    <h3 class="username">{{ userStore.userInfo.value?.user_name || '用户' }}</h3>
                    <p class="user-email">{{ userStore.userInfo.value?.email || 'user@example.com' }}</p>
                  </div>
                </div>

                <!-- Navigation Menu -->
                <div class="menu-section">
                  <el-menu
                      :default-active="route.name"
                      class="custom-menu"
                      background-color="transparent"
                      text-color="#f5f5f5"
                      active-text-color="#64b5f6"
                  >
                    <el-menu-item
                        v-for="(item, index) in menuList"
                        :key="index"
                        :index="item.index"
                        @click="change(item.path)"
                        class="custom-menu-item"
                    >
                      <div class="menu-item-content">
                        <el-icon class="menu-item-icon">
                          <component :is="item.icon"></component>
                        </el-icon>
                        <span class="menu-item-text" v-if="item.index==='Message'">
                          <el-badge :value="unreadNum" :hidden="unreadNum===0" :offset="[20,10]">
                            {{ item.title }}
                          </el-badge>
                        </span>
                        <span class="menu-item-text" v-else>
                          {{ item.title }}
                        </span>
                      </div>
                      <div class="menu-item-indicator"></div>
                    </el-menu-item>
                  </el-menu>
                </div>
              </el-card>
            </el-aside>

            <!-- Main Content -->
            <el-main class="custom-main">
              <div class="content-wrapper">
                <router-view></router-view>
              </div>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';

.page-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #3b4a5c 100%);
  padding: 0;
  margin: 0;
}

.person-card {
  width: 1250px;
  min-height: 800px;
  margin: 0 auto;
  padding-top: 80px;
  background: linear-gradient(135deg, #34495e 0%, #2c3e50 50%, #2980b9 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;

  :deep(.el-card__body) {
    padding: 0;
    background: transparent;
  }
}

.custom-header {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: 20px 20px 0 0;

  .header-background {
    position: relative;
    width: 100%;
    height: 100%;

    .header-bg-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.4) contrast(1.1);
    }

    .header-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg,
          rgba(52, 73, 94, 0.7) 0%,
          rgba(44, 62, 80, 0.5) 50%,
          rgba(41, 128, 185, 0.7) 100%
      );
    }
  }

  .header-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .header-decoration {
      display: flex;
      align-items: center;
      gap: 20px;

      .decoration-line {
        width: 60px;
        height: 2px;
        background: linear-gradient(90deg, transparent, #64b5f6, transparent);
      }

      .decoration-circle {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #64b5f6;
        box-shadow: 0 0 20px rgba(100, 181, 246, 0.5);
      }
    }
  }
}

.main-container {
  background: transparent;
  padding: 0;
}

.custom-aside {
  padding: 0;
  background: transparent;
}

.side-card {
  margin: 80px 30px 0;
  background: rgba(52, 73, 94, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  min-height: 500px;
  padding: 0;
  z-index: 10;
  position: relative;

  :deep(.el-card__body) {
    padding: 30px 20px;
    background: transparent;
  }
}

.avatar-section {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.avatar-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.avatar-ring {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #64b5f6, #90caf9);
  padding: 4px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(100, 181, 246, 0.3);

    .avatar-overlay {
      opacity: 1;
    }
  }
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;

  i {
    color: white;
    font-size: 24px;
  }
}

.user-info {
  .username {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .user-email {
    color: #bdc3c7;
    font-size: 0.9rem;
    margin: 0;
  }
}

.menu-section {
  .custom-menu {
    border: none;
    background: transparent;

    :deep(.el-menu-item) {
      background: transparent !important;
      border: none;
      margin: 8px 0;
      border-radius: 12px;
      padding: 0;
      height: auto;
      line-height: normal;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        transform: translateX(5px);
      }

      &.is-active {
        background: linear-gradient(135deg, rgba(100, 181, 246, 0.25), rgba(144, 202, 249, 0.15)) !important;

        .menu-item-indicator {
          width: 4px;
        }

        .menu-item-text {
          color: #ffffff !important;
          font-weight: 600;
        }
      }
    }
  }
}

.custom-menu-item {
  position: relative;
}

.menu-item-content {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  width: 100%;
}

.menu-item-icon {
  margin-right: 16px;
  font-size: 18px;
  width: 24px;
  display: flex;
  justify-content: center;
  color: #64b5f6;
}

.menu-item-text {
  font-size: 15px;
  font-weight: 500;
  color: #f5f5f5;
  transition: color 0.3s ease;
}

.menu-item-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 30px;
  background: linear-gradient(135deg, #64b5f6, #90caf9);
  border-radius: 0 4px 4px 0;
  transition: width 0.3s ease;
}

.custom-main {
  padding: 30px;
  background: transparent;
}

.content-wrapper {
  background: rgba(52, 73, 94, 0.95);

  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 30px;
  min-height: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  color: #2c3e50;
}

/* Responsive Design */
@media (max-width: 1300px) {
  .person-card {
    width: 95%;
    margin: 80px auto 0;
  }
}

@media (max-width: 768px) {
  .person-card {
    width: 95%;
    margin: 80px auto 0;
  }

  .custom-aside {
    width: 100% !important;
  }

  .side-card {
    margin: -30px 15px 20px 15px;
  }

  .custom-main {
    padding: 15px;
  }

  .main-container {
    flex-direction: column;
  }
}

/* Animation for menu items */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.custom-menu-item {
  animation: slideIn 0.3s ease forwards;
}

.custom-menu-item:nth-child(1) {
  animation-delay: 0.1s;
}

.custom-menu-item:nth-child(2) {
  animation-delay: 0.2s;
}

.custom-menu-item:nth-child(3) {
  animation-delay: 0.3s;
}

.custom-menu-item:nth-child(4) {
  animation-delay: 0.4s;
}

/* Scrollbar styling */
:deep(.el-main) {
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #64b5f6, #90caf9);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #42a5f5, #64b5f6);
  }
}
</style>